<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

</body>
<script>
    // 传统对象的键名是字符串类型,如果用其他数据类型作为键名,会隐式转化为字符串

    // var data = {};

    // var num = 100;
    // var str = "hello";
    // var bool = true;
    // var a = null;
    // var arr = [1, 2, 3, 4];
    // var obj = { a: 1, b: 2 };
    // var div = document.createElement("div")

    // data[num] = 200;
    // data[str] = "world";
    // data[bool] = false;
    // data[a] = undefined;
    // data[arr] = [4, 3, 2, 1];
    // data[obj] = obj;
    // data[div] = div;

    // console.log(data);
    // // console.log(arr.toString());
    // // console.log(obj.toString());

    // for (var key in data) {
    //     console.log(key, typeof key);
    // }

    // 为了解决这个问题，ES6 提供了 Map 数据结构。它类似于对象，也是键值对的集合，但是“键”的范围不限于字符串，各种类型的值（包括对象）都可以当作键。也就是说，Object 结构提供了“字符串—值”的对应，Map 结构提供了“值—值”的对应，是一种更完善的 Hash 结构实现。如果你需要“键值对”的数据结构，Map 比 Object 更合适。

    // 如何创建Map数据结构 => 构造函数创建
    var m = new Map();
    console.log(m);
    console.log(m.size);

    // Map数据结构的属性和拓展方法
    // 属性
    // size  返回Map数据结构成员的个数(数据的条数)

    // 方法
    // set(key,val)  对应键名设置键值 1. 没有就新增 有就修改 2.返回值map数据本身 => 可以进行链式操作
    // get(key)      对应键名获取键值 存在=>键值 不存在 => undefined
    // delete(key)   对应键名删除数据 删除成功 => true  删除失败 => false
    // clear()       清空所有数据    返回值:undefined
    // has()         判断某个键名是否存在



    var arr = [1, 2, 3, 4];
    var obj = { a: 1, b: 2 };
    var div = document.createElement("div")

    m.set(100, 200);
    m.set(100, 300);
    m.set("hello", "world");
    m.set(true, false);
    m.set(null, undefined);
    m.set(arr, arr);
    m.set(obj, obj);
    m.set(div, div);
    console.log(m);

    // var result = m.set(100, 200);
    // console.log("result:", result, result === m);

    // m.set(100, 200).set(100, 300).set("hello", "world").set(true, false).set(null, undefined).set(arr, arr).set(obj, obj).set(div, div);

    // console.log(m.get(100))
    // console.log(m.get("hello"))
    // console.log(m.get(true))
    // console.log(m.get(null))
    // console.log(m.get(arr))
    // console.log(m.get(obj))
    // console.log(m.get(div))
    // console.log(m.get("zxczxc"))


    // console.log(m.delete(100))
    // console.log(m.delete("hello"))
    // console.log(m.delete(true))
    // console.log(m.delete(null))
    // console.log(m.delete(arr))
    // console.log(m.delete(obj))
    // console.log(m.delete(div))
    // console.log(m.delete("zxczxc"))

    // console.log(m.clear())

    // console.log(m.has(100))
    // console.log(m.has("hello"))
    // console.log(m.has(true))
    // console.log(m.has(null))
    // console.log(m.has(arr))
    // console.log(m.has(obj))
    // console.log(m.has(div))
    // console.log(m.has("zxczxc"))

    // console.log(m);
    // console.log(m.size);


    // Map的遍历方法
    m.forEach(function (val, key, oM) {
        console.log(key, val);
    })





</script>

</html>